<template>
    <div>
        <div align="center" v-if="loginInfo.roleId===8">
            <el-form style="background-color:#eef1f6;width: 80%;height:40px;" align="left" class="one">
                快捷入口
            </el-form>
            <el-form inline class="demo-form-inline" style="width: 80%">

                <div class="cli">
                    <i class="el-icon-edit-outline" @click="jianfang"></i>

                    <i class="el-icon-edit-outline" @click="chuzu"></i>

                    <i class="el-icon-edit-outline" @click="zhuanrang"></i>
                </div>
                <div class="tiaozhuan">
                    建房申请 &nbsp;

                    出租申请 &nbsp;

                    转让申请 &nbsp;
                </div>
            </el-form>
        </div>

        <br>
        <div align="center" v-if="loginInfo.roleId !==8">
            <el-form style="background-color:#eef1f6;width: 80%;height:40px;" align="left" class="one">
                代办业务
            </el-form>
            <el-form inline class="demo-form-inline" style="width: 80%;height: 50px">
                <div class="wenzi" >
                    <b>建房申请</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <b style="color:red">({{countBuilding}})</b> &nbsp;&nbsp;

                    <b>出租申请</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b style="color:red">({{leaseCount}})</b> &nbsp;&nbsp;

                    <b>转让申请</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b style="color:red">({{transferCount}})</b> &nbsp;&nbsp;
                </div>
            </el-form>
        </div>

        <br>
        <div align="center" v-if="loginInfo.roleId !==8">
            <el-form style="background-color:#eef1f6;width: 80%;height:40px;" align="left" class="one">
                业务统计
            </el-form>
            <el-form inline class="demo-form-inline" style="width: 80%;height: 600px">
                <div class="app-container">
                    <!--表单-->
                    <el-form :inline="true" ref="searchObj1" :model="searchObj1" class="demo-form-inline">
                        <el-form-item>
                            <el-date-picker
                                    v-model="searchObj1.begin"
                                    type="date"
                                    size="mini"
                                    style="width: 100px"
                                    placeholder="开始"
                                    value-format="yyyy-MM-dd" />
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    v-model="searchObj1.end"
                                    type="date"
                                    size="mini"
                                    style="width: 100px"
                                    placeholder="截止"
                                    value-format="yyyy-MM-dd" />
                        </el-form-item>
                        <el-button
                                :disabled="btnDisabled"
                                type="primary"
                                size="mini"
                                style="margin-right: 100px;margin-top: 7.5px"
                                icon="el-icon-search"
                                @click="showChart1()">建房</el-button>
<!--                    </el-form>-->
<!--                    <el-form :inline="true" ref="searchObj2" :model="searchObj2" class="demo-form-inline">-->
                        <el-form-item>
                            <el-date-picker
                                    v-model="searchObj2.begin"
                                    type="date"
                                    size="mini"
                                    style="width: 100px"
                                    placeholder="开始"
                                    value-format="yyyy-MM-dd" />
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    v-model="searchObj2.end"
                                    type="date"
                                    size="mini"
                                    style="width: 100px"
                                    placeholder="截止"
                                    value-format="yyyy-MM-dd" />
                        </el-form-item>
                        <el-button
                                :disabled="btnDisabled"
                                type="primary"
                                size="mini"
                                style="margin-right: 100px"
                                icon="el-icon-search"
                                @click="showChart2()">出租</el-button>
<!--                    </el-form>-->
<!--                    <el-form :inline="true" ref="searchObj3" :model="searchObj3" class="demo-form-inline">-->
                        <el-form-item>
                            <el-date-picker
                                    v-model="searchObj3.begin"
                                    type="date"
                                    size="mini"
                                    style="width: 100px"
                                    placeholder="开始"
                                    value-format="yyyy-MM-dd" />
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    v-model="searchObj3.end"
                                    type="date"
                                    size="mini"
                                    style="width: 100px"
                                    placeholder="截止"
                                    value-format="yyyy-MM-dd" />
                        </el-form-item>
                        <el-button
                                :disabled="btnDisabled"
                                type="primary"
                                size="mini"
                                icon="el-icon-search"
                                @click="showChart3()">转让</el-button>
                    </el-form>
                    <div class="chart-container">
                        <div id="chart" class="chart" style="height:400px;width:800px" />
                    </div>

                </div>
            </el-form>
        </div>

    </div>
</template>

<script>
    import echarts from 'echarts'
    import axios from "axios";
    export default {
        data(){
            return{
                loginInfo:{},
                countBuilding:'',
                transferCount:'',
                leaseCount:'',
                searchObj1: {
                    begin: '',
                    end: ''
                },
                searchObj2: {
                    begin: '',
                    end: ''
                },
                searchObj3: {
                    begin: '',
                    end: ''
                },
                btnDisabled: false,
                chart: null,
                title: '',
                xData: [],
                yData: []

            }
        },
        created(){
            this.showUser()
            this.count()
        },
        methods: {
            jianfang(){
                this.$router.push('/vitalize/build')
            },
            chuzu(){
                this.$router.push('/vitalize/rent')
            },
            zhuanrang(){
                this.$router.push('/vitalize/transfer')
            },
            showUser(){
                if (sessionStorage.getItem('tokenUser')) {
                    this.loginInfo = JSON.parse(sessionStorage.getItem('tokenUser'))
                }else if (sessionStorage.getItem('tokenCust')) {
                    this.loginInfo = JSON.parse(sessionStorage.getItem('tokenCust'))
                }
                //this.loginInfo = JSON.parse(window.sessionStorage.getItem('tokenCust'))
                console.log(this.loginInfo)

            },
            count(){
                //建房申请条数
                console.log(this.loginInfo)
                this.getRequest("/house/building/buildingCount/"+this.loginInfo.roleId)
                    .then((res) => {
                        console.log(res.data.count)
                        this.countBuilding = res.data.count;
                    });
                //出租申请条数
                this.getRequest("/house/lease/leaseCount/"+this.loginInfo.roleId)
                    .then((res) => {
                        this.leaseCount = res.data.count;
                    });
                //转让申请条数
                this.getRequest("/house/lease/transferCount/"+this.loginInfo.roleId)
                    .then((res) => {
                        this.transferCount = res.data.count;
                    });
            },

            showChart1() {
                //调用方法
                axios.post('http://localhost:8082/house/buildingCount/showData/'+this.searchObj1.begin+'/'+this.searchObj1.end).then( (res) => {
                    //把x轴y轴的值获取到
                    this.xData=  res.data.data_calList;
                    this.yData= res.data.data_count;
                    //调用图标生成方法，
                    this.setChart()
                })
            },showChart2() {
                axios.post('http://localhost:8082/house/leaseCount/showData/'+this.searchObj2.begin+'/'+this.searchObj2.end).then( (res) => {
                    //把x轴y轴的值获取到
                    this.xData=  res.data.data_calList;
                    this.yData= res.data.data_count;
                    //调用图标生成方法，
                    this.setChart()
                })


            },
            showChart3() {
                axios.post('http://localhost:8082/house/transferCount/showData/'+this.searchObj3.begin+'/'+this.searchObj3.end).then( (res) => {
                    //把x轴y轴的值获取到
                    this.xData=  res.data.data.data_calList;
                    this.yData= res.data.data.data_count;
                    //调用图标生成方法，
                    this.setChart()
                })

            },
// 设置图标参数
            setChart() {
// 基于准备好的dom，初始化echarts实例
                this.chart = echarts.init(document.getElementById('chart'))
// console.log(this.chart)
// 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '房屋数据'
                    },
                    tooltip: {},//触碰显示数据
                    legend: {
                        data:['申请']
                    },
// x轴是类目轴（离散数据）,必须通过data设置类目数据
                    xAxis: {
                        // type: 'category',
                        data: this.xData
                    },

// y轴是数据轴（连续数据）
                    yAxis: {
                        // type: 'value'
                    },
// 系列列表。每个系列通过 type 决定自己的图表类型
                    series: [{
                        name: '申请',
// 系列中的数据内容数组
                        data: this.yData,
// 折线图
                        type: 'line'
                        //  type: 'pie' //圆形图
                        // type:'bar'//柱状图
                    }]
                }
                this.chart.setOption(option)
            }
        }
    }
</script>

<style>
    .one {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);
    }
    .demo-form-inline{
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);


    }
    /* 按钮 */
    .cli{
        position: relative;
        right: 235px;
        letter-spacing: 61px
    }

    .tiaozhuan{
        position: relative;
        right: 250px;
        letter-spacing: 5px;
        font-weight: bold;
    }

    /* 文字 */
    .wenzi{
        position: relative;
        right: 100px;
        letter-spacing: 5px;
        font-weight: bold;
    }
    .el-icon-edit-outline{
        font-size: 50px;

    }
</style>